<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //绑定blur事件
            $("#username").blur(function () {
                var username = $(this).val();
                $.get("hello-servlet", {username: username}, function (data) {
                    alert(data)
                    var span = $("#s_u")
                    if (data.userExsit) {
                        span.css("color", "red");
                        span.html(data.msg)
                    } else {
                        span.css("color", "green");
                        span.html(data.msg)
                    }
                })
            })
        })
    </script>
</head>
<body>
<form>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="s_u"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码">
    <input type="submit" value="注册"><br>
</form>
</body>
</html>